<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
    <button type="button" @click="testMock">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    const myChart = echarts.init(this.$refs.echarts)
    const option = {
      title: {
        text: '堆叠柱状图'
      },
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 43, 49],
          type: 'bar',
          // 给一个系列的 stack 值设置一个字符串类型的值，拥有同样 stack 值的系列将堆叠在一组。
          stack: 'x'
        },
        {
          data: [5, 4, 3, 5, 10],
          type: 'bar',
          stack: 'x'
        }
      ]
    }
    myChart.setOption(option)
  },
  methods: {
    testMock () {
      axios.get('/mock/echarts1').then(response => {
        this.myChart.setOption({
          series: [
            {
              name: '储量',
              type: 'bar',
              data: response.data.data.items
            }
          ]
        })
        console.log('response', response.data.data.items)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
